<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>首页</title>
    <style>
        #header,
        .header {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
        img{
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        #first {
            color: red;
        }
        .panel-body{
            position: relative;
        }
        .btn-success{
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        .list-group-item{
            text-align: right;
        }

    </style>
</head>

<body>
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">智游问答系统</a>
            </div>
            <div>
                <ul class="nav navbar-nav navbar-right">
                    <li id="question">
                        <a href="#">
                            <span class="glyphicon glyphicon-question-sign"></span> 提问
                        </a>
                    </li>
                    <li class="showDro"><a href="regist.html"><span class="glyphicon glyphicon-registration-mark"></span>
                            注册</a></li>
                    <li class="showDropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <span id="username">username</span>
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="upload.html">上传头像</a></li>
                            <li id="loginOut"><a href="#">退出登录</a></li>
                        </ul>
                    </li>
                    <li class="header">
                        <img id='header' src="" alt="">
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <main></main>
    <script src="js/jquery.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/bootstrap.js"></script>
    <script>
        // 获取当前的cookie
        var user = $.cookie('user')
        //   如果存在user 则说明已经登录
        if (user) {
            $('.showDro').css('display', 'none')
            $('.showDropdown').css('display', 'block')
            // 设置用户名为登录人的用户名
            $('#username').text(user)
            $('.header').css('display', 'block')
            // 否则的话 说明没有登录或者退出登录
        } else {
            $('.showDro').css('display', 'block')
            $('.showDropdown').css('display', 'none')
            $('.header').css('display', 'none')
        }

        $('#loginOut').click(function (e) {
            // 阻止默认事件进行
            e.preventDefault()
            // 移除cookie
            $.removeCookie('user')
            // 刷新页面
            window.location.href = '/'
        })

        // $('#header').attr('src','allheaders/123123.jpg')
        $.get('/myHeader', function (data) {
            // 拼接图片路径
            var imgSrc = 'allheaders/' + data
            // 添加图片
            $('#header').attr('src', imgSrc)
        })


        // 点击按钮的时候 判断是够存在cookie 存在未登录状态
        // 否则为未登录状态
        $('#question').click(function () {
            // 没有cookie
            if (!user) {
                window.location.href = 'login.html'
            }
            else {
                window.location.href = 'ask.html'
            }
        })

        // 获取所有的问题
        $.get('/questions/list', function (data) {
            console.log(data)
            var html = ''
            for (var index = 0; index < data.length; index++) {
                // 分别获取每一个问题
                var question = data[index]
                console.log(question)
                html += '<div class="container">'
                html += '<div class="panel panel-success">'
                html += '<div class="panel-heading">'
                html += '<h3 class="panel-title"><img src="allheaders/' + question.header +'">'+ question.name + 
                    ' 时间:' + question.time + '</h3></div>'
                html += '<div class="panel-body">'
                html += question.content + '<button data-num=' + index + ' class="btn btn-success">我来回答</button><br><br></div>'
                if(question.answerList)
                {   
                    html += '<ul class="list-group">'
                    for(var i = 0 ; i < question.answerList.length ;i ++)
                    {
                        // 获取问题的每一个答案
                        var answer = question.answerList[i] 
                        html += '<li href="#" class="list-group-item">'
                        html += '<div class="list-group-item-heading">'
                        html += '<img src="allheaders/' + answer.header + '">' + answer.name + ' 回答时间:' + answer.time + '</div></li>'
                        html += '<li href="#" class="list-group-item">'
                        html += '<p class="list-group-item-text">'
                        html += answer.content + '</p></li>'
                    }
                    html += '</ul>'
                }
                html += '</div></div>'
            }
            $('main').html(html)
            

            $('.btn-success').click(function(){
                // 将当前索引保存在cookie中
                $.cookie('index',$(this).attr('data-num'))

                if(user){
                    window.location.href = 'answer.html'
                }
                else{
                    window.location.href = 'login.html'
                }
            })
        })

    </script>
</body>

</html>